<template>
    <div class="wrapper">
        <div class="left">
            <SvgIcon
                    style="color:rgb(203, 200, 200);width:30px;font-size:20px;"
                    class="icon-left1"
                    @click.native="click_back"
                    icon="icon-left1"
            ></SvgIcon>
        </div>
        <div class="center">{{$props.title}}</div>
        <div class="right">
            <slot name="right"></slot>
        </div>
    </div>
</template>
<script>
    import SvgIcon from '../svgIcon'

    export default {
        components: {SvgIcon},
        methods: {
            click_back() {
                if (this.$props.leftPath) {
                    this.$router.push({path: this.$props.leftPath})
                } else {
                    this.$router.go(-1)
                }
            }
        },
        props: {
            title: {
                type: String,
                default: ''
            },
            leftPath: {
                type: String,
                default: ''
            }
        }
    }
</script>
<style lang="less" scoped>
    .wrapper {
        padding-right: px2rem(10);
        padding-left: px2rem(10);
        display: flex;
        align-items: center;
        height: px2rem(88);
        border-bottom: 1px solid #eee;
        box-shadow: 0 1px 1px #eee;
    }

    .center {
        text-align: center;
        flex: 1;
        font-size: 16px;
    }

    .right {
        display: flex;
        align-items: center;
        width: px2rem(80);
        height: px2rem(80);
    }
</style>